<template>
  <div class="search-form-box">
    <el-form
      ref="formRef"
      :model="formData"
      :inline="true"
      size="small"
      :label-width="cssObj.inputWidth"
    >
      <el-row  :style="{minWidth: minRowWidth,maxWidth: maxRowWidth}">

        <el-col :span="cssObj.colSpan"
                class="colClass"
                v-for="(item, index) in formOptions"
                :key="index"
        >
          <el-form-item
            :prop="item.prop"
            :label="item.label ? item.label : ''"
          >
            <formItem :clearable="false" v-model="formData[item.prop]" :item-options="item" />
          </el-form-item>
        </el-col>

        <!-- 自定义插槽，可用于特殊表单块 -->
        <el-col :span="cssObj.slotSpan ? cssObj.slotSpan : 0" class="colClass">
          <slot />
        </el-col>
        <el-col :span="cssObj.btnSpan" class="colClass"
        >
          <el-form-item :style="{paddingLeft:`${cssObj.left}`}">
            <my-button
              v-if="btnItems.includes('search')"
              size="mini"
              type="primary"
              class="btn-search"
              @click.native.stop="onSearch"
            >查询</my-button
            >
            <el-button
              v-if="btnItems.includes('reset')"
              size="mini"
              type="default"
              class="btn-reset"
              @click.native.stop="onReset"
            >重置</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import formItem from '@/components/SearchForm/formItem.vue'
import { createUniqueString } from '@/utils/tools'

export default {
  components: { formItem },
  props: {

    minRowWidth: {
      type: String,
      default: 'auto' //不传就不设
    },
    maxRowWidth: {
      type: String,
      default: 'auto' //不传就不设
    },
    /**
     * 表单配置
     * 示例：
     * [{
     *   label: '用户名', // label文字
     *   prop: 'username', // 字段名
     *   element: 'el-input', // 指定elementui组件
     *   initValue: '阿黄', // 字段初始值
     *   placeholder: '请输入用户名', // elementui组件属性
     *   rules: [{ required: true, message: '必填项', trigger: 'blur' }], // elementui组件属性
     *   events: { // elementui组件方法
     *     input (val) {
     *       console.log(val)
     *     },
     *     ...... // 可添加任意elementui组件支持的方法
     *   }
     *   ...... // 可添加任意elementui组件支持的属性
     * }]
     */
    formOptions: {
      type: Array,
      required: true,
      default() {
        return []
      }
    },
    // 提交按钮项，多个用逗号分隔（search, export, reset）
    btnItems: {
      type: String,
      default() {
        return 'search,reset'
      }
    },
    // 如果搜索条件过多，需要换行，请自行设置样式宽度来保证上下对齐
    cssObj: {
      type: Object,
      default() {
        return {
          inputWidth:'100px',// 查询条件label宽度，设置是为了对齐
          slotSpan:0,// 插槽占宽,默认为0
          colSpan:3,// 一行显示几个 span
          btnSpan:8,// 按钮占宽 span
          left:'40px'
        }
      }
    },
    rowObj:{
      type: Object,
      default() {
        return {}
      }
    }
  },

  data() {
    return {
      formData: {}
    }
  },

  computed: {
    newKeys() {
      return this.formOptions.map(v => {
        return createUniqueString
      })
    }
  },

  created() {
    this.addInitValue()
  },
  methods: {
    // 校验
    onValidate(callback) {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          console.log('提交成功')
          console.log(this.formData)
          callback()
        }
      })
    },
    // 搜索
    onSearch() {
      this.onValidate(() => {
        this.$emit('onSearch', this.formData)
      })
    },
    // 导出
    onExport() {
      this.onValidate(() => {
        this.$emit('onExport', this.formData)
      })
    },
    onReset() {
      // bug
      // this.$refs.formRef.resetFields()
      //yg 2023-4-24
      Object.keys(this.formData).forEach((key => {
        this.formData[key]=''
      }))
    },
    // 添加初始值
    addInitValue() {
      const obj = {}
      this.formOptions.forEach(v => {
        if (v.initValue !== undefined) {
          obj[v.prop] = v.initValue
        }
      })
      this.formData = obj
    }
  }
}
</script>

<style lang="scss" scoped>
.search-form-box {
  display: flex;
  margin-bottom: 10px;
  border-radius: 5px;
  //background: rgb(243, 244, 249);
  //padding: 5px 10px;

  .btn-box {
    padding-top: 5px;
    display: flex;
    align-items: flex-end;
    padding-bottom: 8px;
    button {
      height: 28px;
    }
  }
  .el-form {
    width: 100%;
    ::v-deep .el-form-item__label {
      //padding-right: 8px;
    }
    ::v-deep  el-form--inline{
      width: 100%;
    }
    .el-form-item--small {
      margin-bottom: 0px;
      //background: #f3f4f9;
      //padding: 5px;
    }
    .el-form-item {
      //margin-bottom: 0;
      margin-right: 0px;
      &.is-error {
        margin-bottom: 22px;
      }
    }
    // el-input宽度
    ::v-deep .form-item {
      > .el-input:not(.el-date-editor) {
        width: 200px;
      }
    }
    ::v-deep .el-select {
      //width: 120px;
    }
    ::v-deep .el-cascader {
      //width: 240px;
    }
    ::v-deep .el-checkbox-group{
      height: 33px;
    }
  }
  .colClass{
    margin-bottom: 1px;
    background: #f3f4f9;
    padding: 5px;
    //border: 1px solid red;
  }
}
</style>
